<template>
  <div>
    <nav-bar>
        <div slot="center">
          <div @click="ssgoBack" class="">
              <my-search :inwidth="Cwidth"></my-search>
          </div>
        </div>
    </nav-bar>
    <div class="menu">
      <category-left :catdata="catdata" @childrenClick="childrenClick"></category-left>
      <category-right :tegmenus="tegmenus"></category-right>
    </div>
  </div>
</template>

<script>
import { getCategories } from '@/network/categories.js'
import CategoryLeft from './childComps/CategoryLeft.vue'
import CategoryRight from './childComps/CategoryRight.vue'
import NavBar from '@/components/navbar/NavBar.vue'
import MySearch from '@/components/my-search/my-search.vue'
export default {
  name: 'Category',
  data () {
    return {
      catdata: [],
      menus: [],
      tegIndex: 0,
      tegmenus: [],
      Cwidth: '90vw'
    }
  },
  created () {
    this.getCategories()
    this.getChildren()
  },
  components: {
    CategoryLeft,
    CategoryRight,
    NavBar,
    MySearch
  },
  // watch: {
  //   firstIndex (val) {
  //     this.tegIndex = val
  //   }
  // },
  methods: {
    getIndicator () {
      this.$indicator.open({
        text: '加载中'
      })
    },
    // 数据请求
    getCategories () {
      getCategories().then(res => {
        // console.log(res.message)
        this.catdata = res.message
      })
    },
    getChildren () {
      this.getIndicator()
      getCategories().then(res => {
        this.$indicator.close()
        // console.log(res.message[this.tegIndex].children)
        this.tegmenus = res.message[this.tegIndex].children
        // this.tegmenus = res.message[this.tegIndex]
      })
    },
    childrenClick (index) {
      console.log(index)
      this.tegIndex = index
      this.getChildren()
    },
    ssgoBack () {
      this.$router.push({ name: 'Search' })
    }
  }
}
</script>

<style lang="scss" scoped>
  ul{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .menu{
    display: flex;
    position: absolute;
    text-align: center;
    top: 45px;
    bottom: 50px;
    width: 100%;
    overflow: hidden;
  }
</style>
